<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div >
          <el-row class="chartInfo">
              <el-col span='2' class="info" >
                  <span>水平1</span>
                  <div>12s <i class="el-icon-check"></i></div>
                  <div>13s <i class="el-icon-check"></i></div>
                  <div>22s <i class="el-icon-check"></i></div>
                  <div>R4s <i class="el-icon-check"></i></div>
                  <div>41s <i class="el-icon-check"></i></div>
                  <div>10s <i class="el-icon-check"></i></div>

              </el-col>
              <el-col span='22' >
                <div :id="name" style="width:100%;height: 400px;">
                </div>
              </el-col>
          </el-row>
          
    </div>
</template>

<script>
import echarts from 'echarts'


export default {
    name: "EchartsForm",
    props:['name'],
     data() {
        return {
            charts: '',
            opinionData: [],
            xOptions:[],
            yOptions:[],
            dateLineOptions:[],
            proOptions:[],
            pro:'',
            dateLine:''
        }
    },
    watch: {
        
    },
    created() {
        this.getOptions()
        this.initLineOptions()
    },
    methods: {
        getOptions(){
            this.dateLineOptions =[{
                value: '选项1',
                label: '最近30天'
                }, {
                value: '选项2',
                label: '最近一周'
                }, {
                value: '选项3',
                label: '最近半月'
                }, {
                value: '选项4',
                label: '最近一年'
                }, {
                value: '选项5',
                label: '自定义'
                }]
            this.dateLine='选项4'
        },
        getList(initNum,length,dValue){
            let list=['']
            for(let i=0;i<length;i++){
                list.push(initNum+i*dValue)
            }
            return list
        },
      initLineOptions(){
        //x 轴
        
        this.xOptions=this.getList(1,30,1)
          // y轴
        this.yOptions=[-4,-3,-2,-1,0,1,2,3,4,]
        //值
        this.opinionData = [
            [1,2.5],
            [2,3.6],
            [3,0],
            [4,2.6],
            [5,-3.6],
        ]
        // this.opinionData2 = [100,100,100,100,100,100,100]
      },
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: false,
                        data: this.xOptions,
                        // 主轴
                        axisLine:{
                            lineStyle:{
                                color:'rgba(163, 158, 158, 1)'
                            }
                        },
                        // 刻度隐藏
                        axisTick: {
                            show: false
                        },
                        // 其余轴线
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['rgba(163, 158, 158, 1)'],
                                width: 1,
                                type: 'solid'
                            }
                        }
                    
                    },
                    yAxis: {
                        axisLine:{
                                lineStyle:{
                                    color:'rgba(163, 158, 158, 1)'
                                }
                            },
                        axisTick: {
                            show: false
                        },
                        type: 'value',
                        lineStyle:{
                            color:'rgba(163, 158, 158, 1'
                        },
                        
                        // 配置单位
                        axisLabel:{
                            formatter: function (value) {
                                if(value == 0){
                                    return 'mean'
                                }
                                if(value>3){
                                    return ''
                                }
                                if(value<-3){
                                    return ''
                                }
                                return value+'s';
                            }
                        },
                        boundaryGap: false,
                        data: this.yOptions,
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['rgba(163, 158, 158, 1','rgba(214, 36, 199, 1)','orange','rgba(104, 235, 97, 1)','black','rgba(104, 235, 97, 1)','orange','rgba(214, 36, 199, 1)','rgba(163, 158, 158, 1'],
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                
                    series: [{
                        name: '在控',
                        type: 'line',
                        symbol: 'circle',
                        symbolSize:10,
                        data: this.opinionData,
                        lineStyle:{
                            color: ['black'],
                            width: 1,
                            type: 'solid'
                        },
                        itemStyle:{
                            color:function (data) {
                                if(data.data[1] >= 0){
                                    return 'blue'
                                }else{
                                    return 'red';
                                }
                            }
                        }
                    }]
                })
            }
        },
        //调用
        mounted() {
            this.$nextTick(function() {
                this.drawLine(this.name)
            })
        }
};
</script>